<div class="content-margin">
    <div class="cluster-dashboard-container masonry-grid" data-bind="css: { initialized: initialized }">
        <div class="grid-sizer"></div>
        <div class="gutter-sizer"></div>
        <div data-bind="foreach: widgets">
            <div class="cluster-dashboard-item card" data-bind="compose: { model: $data }, attr: { 'data-widget-id': id }, css: { 'fullscreen': fullscreen }"></div>
        </div>
        <div class="text-center text-muted margin-top margin-top-md" data-bind="visible: !widgets().length">
            <i class="icon-xl icon-empty-set"></i>
            <h2 class="margin-top margin-top-sm">No widgets added</h2> 
            <h2>Go ahead and click <a href="#" data-bind="click: addWidgetModal">here</a> to add</h2>
        </div>
        <button class="add-widget" data-bind="click: addWidgetModal, visible: initialized() && bootstrapped()" title="Add widget to board">
            <i class="icon-plus"></i>
        </button>
    </div>
    <div class="tooltip cluster-dashboard-tooltip" style="opacity: 0; display: none">
    </div>
    <style type="text/css" id="cluster-dashboard-node-styles">
        /* this stylesheet is generated automatically based on cluster topology */
    </style>
</div>
